<!--
  @created by kongqf on 2019-12-17 13:54:46
  @updated by
  @description wfdemo
-->
<div class="yu-workflow" style="margin-left: -10px;margin-right: -10px;">
  <yu-workflow ref="refWorkflow" @init="initGraph" :lock="locked" :height="height" @scale="scaleFn" @addedge="addEdgeFn"
    :param="comments" @cellclick="cellclickFn">
    <yu-xdialog title="XML预览" :visible.sync="dialogVisible" slot="dialog">
      <yu-row>
        <yu-col>
          <yu-input type="textarea" :rows="15" v-model="nodeScript">
          </yu-input>
        </yu-col>
      </yu-row>
      <div slot="footer">
        <yu-button @click="dialogClose">返回</yu-button>
      </div>
    </yu-xdialog>
    <template slot="toolbar">
      <div class="geToolbar jWorkflow">
        <yu-row>
          <yu-col v-for="(items,i) in toolbarItems" :span="16 / toolbarItems.length" :class="i>0?'img-bck':''">
            <a v-for="item in items" class="geItem" :title="item.title" @click="toolbarItemClickFn(item.action)">
              <img :src="'libs/mxgraph/images/'+item.img+'.png'">
              <span>{{ item.title }}</span>
            </a>
          </yu-col>
          <yu-col :span="8">
            <a class="geItem">
              <span class="demonstration">缩放</span>
            </a>
            <a class="geItem">
              <yu-slider v-model="value2" @change="graphViewSliderChangeFn"></yu-slider>
            </a>
            <a class="geItem">
              <yu-select placeholder="请选择" v-model="viewScale" class="custom-select" @change="graphViewSelectChangeFn">
                <yu-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </yu-option>
              </yu-select>
            </a>
            <a class="geItem abbrImg" :title="'缩略图'" style="background-color: #ffffff;padding: 2px 6px 0;margin: 3px 12px 0px 6px;border-radius: 3px;border: 1px solid #D3DCE6;" @click="toolbarItemClickFn('outline')">
              <img class="toolbar-icon" :src="'libs/mxgraph/images/outline.png'" style="margin: 4px;">
            </a>
            <a class="geItem no-right" @click="hideSidebarFn" style="background-color: #ffffff;padding: 2px 4px 0;margin-top: 3px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;border: 1px solid #D3DCE6" v-if="!locked">
              <img :src="'libs/mxgraph/images/zuo.png'" style="margin: 4px;">
            </a><a class="geItem no-left" @click="hideFormatbarFn" style="background-color: #ffffff;padding: 2px 4px 0;margin-top: 3px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;border: 1px solid #D3DCE6;border-left: none" v-if="!locked">
                <img :src="'libs/mxgraph/images/you.png'" style="margin: 4px;">
              </a>
            
          </yu-col>
        </yu-row>
      </div>
    </template>
    <template slot="format">
      <yu-xform v-if="formatType === 'vertex'" ref="refFormvertex" label-width="80px" :show-message="false"
        :hidden-rule="true" v-model="formdatavertex">
        <yu-collapse v-model="activeName">
          <yu-collapse-item name="0">
            <template slot="title">
              <label>属性</label>
            </template>
            <yu-xform-group :column="1">
              <yu-xform-item v-for="item in formItems.base" :label="item.name" :ctype="getFormItemCtype(item.type)"
                :readonly="item.readOnly === true" :disabled="item.readOnly === true" :name="item.key"
                :value="item.defaultValue || ''" :options="item.value" :required="item.required" :hidden="item.hidden"
                v-if="((tmpCell &&(item.key =='nid'||item.key == 'label'))?true:(tmpCell.data.nodeType !='S'&&tmpCell.data.nodeType !='E'))">
              </yu-xform-item>
            </yu-xform-group>
          </yu-collapse-item>
          <yu-collapse-item name="1"
            v-if="tmpCell && tmpCell.data.nodeType !='S' && tmpCell.data.nodeType !='E' && checkHiddenItem('selectable')">
            <template slot="title">
              <label>可选</label>
            </template>
            <yu-xform-group :column="1">
              <yu-xform-item v-for="item in formItems.selectable" :label="item.name"
                :ctype="getFormItemCtype(item.type)" :readonly="item.readOnly === true "
                :value="item.defaultValue || ''"
                :disabled="item.readOnly === true ? (item.key != 'nodeScriptTxt' && item.key != 'subFlowId'):false"
                :hidden="item.hidden" :name="item.key" :options="item.value">
              </yu-xform-item>
            </yu-xform-group>
          </yu-collapse-item>
          <yu-collapse-item name="2"
            v-if="tmpCell && tmpCell.data.nodeType !='S' && tmpCell.data.nodeType !='E' &&  checkHiddenItem('oper')">
            <template slot="title">
              <label>操作</label>
            </template>
            <yu-xform-group :column="1">
              <yu-xform-item v-for="item in formItems.oper" :label="item.name" :ctype="getFormItemCtype(item.type)"
                :readonly="item.readOnly === true" :disabled="item.readOnly === true" :name="item.key"
                :value="item.defaultValue || ''" :options="item.value" :hidden="item.hidden">
              </yu-xform-item>
            </yu-xform-group>
          </yu-collapse-item>
        </yu-collapse>
      </yu-xform>
      <yu-xform v-if="formatType === 'edge'" ref="refFormedge" label-width="80px" v-model="formdataedge">
        <yu-collapse v-model="activeName">
          <yu-collapse-item name="0">
            <template slot="title">
              <label>属性</label>
            </template>
            <yu-xform-group :column="1">
              <yu-xform-item v-for="item in formItems.edge" :label="item.name" :ctype="getFormItemCtype(item.type)"
                :readonly="item.readOnly === true" :disabled="item.readOnly === true && item.key != 'routeScriptTxt'"
                :name="item.key" :value="item.defaultValue || ''" :options="item.value"></yu-xform-item>
            </yu-xform-group>
          </yu-collapse-item>
        </yu-collapse>
      </yu-xform>
      <yu-xform v-if="formatType === 'workflow'" ref="refFormworkflow" label-width="80px" v-model="formdataworkflow">
        <yu-collapse v-model="activeName">
          <yu-collapse-item name="0">
            <template slot="title">
              <label>属性</label>
            </template>
            <yu-xform-group :column="1">
              <yu-xform-item v-for="item in formItems.wf" :label="item.name" :ctype="getFormItemCtype(item.type)"
                :readonly="item.readOnly === true" :disabled="item.readOnly === true" :name="item.key"
                :value="item.defaultValue || ''" :options="item.value"></yu-xform-item>
            </yu-xform-group>
          </yu-collapse-item>
        </yu-collapse>
      </yu-xform>
    </template>
  </yu-workflow>
</div>